<template>
	<view class="wrap">
		<view class="search cu-bar">
			<u-search v-model="barCode" ref="uSearch" :focus="focus" placeholder="请扫描产品条码" :show-action="false"
				@custom="search" @search="search" focus></u-search>
			<view style="margin-left:10px;display: flex;flex-direction: column;">
				<u-button size="medium" @click="empty" type="primary"
					style="margin-bottom: 13px;width: 60px;height: 25px;">清空
				</u-button>

				<u-button size="medium" v-if="cWhData.bWhPos=='1'" @click="clearing" type="primary"
					style="width: 60px;height: 25px;">清货位
				</u-button>
			</view>
		</view>

		<view style="margin:20px 5px 10px;">
			<!-- <u-form class="form bg-white" :model="model" ref="uForm" label-position="left">
			<u-form-item label="仓库:" prop="testCarVen" label-width="200" required :label-style="{'font-weight':'bold'}">
				<js-select v-model="model.carVenCode" :items="carVenSelectList" placeholder="请选择仓库" :tree="true"
					:label-value="model.carVenName" @label-input="model.carVenName = $event"></js-select>
			</u-form-item>
			</u-form> -->
			<u-table>
				<u-tr>
					<u-th width="150px">批次</u-th>
					<u-th>简称</u-th>
					<u-th width="50px">数量</u-th>
					<u-th v-if="cWhData.bWhPos=='1'">货位</u-th>
				</u-tr>
				<view style=" height: 53vh;overflow: scroll;">
					<view v-for="(item,index) in list" :key='index' @click='detailsTr(item)'
						:style="{backgroundColor: item.flag=='1'? 'yellow':''}">
						<!-- <u-swipe-action @click="click(index)" :index="index" :options="options"   :bg-color="item.flag=='1'? 'yellow':''"> -->
						<u-tr v-if="list.length">
							<u-td width="150px"> {{item.cBatch}}</u-td>
							<u-td>{{item.cInvMnemCode}}</u-td>
							<u-td width="50px">{{item.BarQty}}</u-td>
							<u-td v-if="cWhData.bWhPos=='1'">{{item.cPosName}}</u-td>
						</u-tr>
						<!-- </u-swipe-action> -->
					</view>
					<u-empty v-if="!list.length" text="暂无数据" mode="data"></u-empty>

				</view>

			</u-table>
		</view>
		<view style="margin-left: 5px;font-size: 18px;">
			<view>
				总扫描箱数：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{cases}}</text> 箱
			</view>
			<view>
				总扫描数量：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{pieces}}</text> 件
			</view>
			<view style='text-align: right;position: relative;top: -20px;right: 10px;'>
				<u-button size="mini" type="primary" @click="ground" v-if="cWhData.bWhPos=='1'" 
					style="margin-bottom: 15px;width: 80px;height: 30px; color: #fff;font-size: 16px;">
					上架
				</u-button>
				<view>
				</view>
				<u-button size="mini" @click="warehouse" type="primary"
					style="width: 80px;height: 30px;color: #fff;font-size: 16px;">入库
				</u-button>
			</view>

		</view>
		<u-popup v-model="groundShow" mode="center" width="80%" height="20%" :closeable="true" border-radius="14">
			<view
				style="height: 100%; padding: 10px;font-size: 16px; display: flex;flex-direction: column;  justify-content: center;">
				<view>
					货位扫描：
				</view>
				<u-search v-model="cPosCode" placeholder="请扫描货位码" :show-action="false" @custom="cPoSearch"
					@search="cPoSearch" focus></u-search>
			</view>

		</u-popup>


		<u-popup v-model="show" mode="bottom" height="60%" :closeable='true'>

			<view style="padding: 10px;">
				<view style="font-size: 18px;">详细信息：</view>
				<u-form :model="form" ref="uForm" style="height: 53vh;overflow: scroll;">
					<u-form-item label="条码：" label-width='150'>
						<u-input placeholder="" v-model="form.BarCode" :disabled='true' />
					</u-form-item>
					<u-form-item label="批次：" label-width='150'>
						<u-input placeholder="" v-model="form.cBatch" :disabled='true' />
					</u-form-item>
					<u-form-item label="流转卡：" label-width='150'>
						<view style="width: 230px; word-wrap: break-word;word-break: normal;">{{form.DoCodeStr}}</view>
						<!-- <u-input placeholder="" v-model="form.DoCodeStr" :disabled='true'  /> -->
					</u-form-item>
					<u-form-item label="数量：" label-width='150'>
						<u-input placeholder="" v-model="form.BarQty" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料编码：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvCode" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料名称：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvName" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料规格：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvStd" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料图号：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvAddCode" :disabled='true' />
					</u-form-item>
				</u-form>
			</view>

		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus: true,
				cases: 0,
				pieces: 0,
				cWhData: {},
				form: {},
				groundShow: false,
				show: false,
				barCode: '',
				cPosCode: '',
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onShow() {},
		onLoad(params) {
			this.cWhData = JSON.parse(params.cWhData)
		},
		methods: {
			// 上架
			ground() {
				if (this.list.length) {

					let flag = false;
					this.list.forEach(item => {
						if (item.flag == '1') {
							flag = true
						}
					})
					if (flag) {
						this.groundShow = true;
					} else {
						this.$u.toast('请重新扫描产品条码')
					}
				} else {
					this.$u.toast('请先扫描产品条码')
				}
			},
			// 清货位
			clearing() {
				let _this = this
				if (this.list.length) {
					uni.showModal({
						title: '提示',
						content: '是否清除全部货位',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								let newArr = _this.list.map(item => {
									item.cPosName = ''
									item.cPosCode = ''
									item.flag = '0'
									return item
								})
								_this.barCode = '';
								_this.list = newArr;
								_this.cases = 0;
								_this.pieces = 0;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
				} else {
					this.$u.toast('请先扫描产品条码')
				}


			},
			// 清空
			empty() {
				this.barCode = '';
				this.cases = 0;
				this.pieces = 0;
				this.list = [];
			},
			// 条码获取数据
			loadList(BarCode) {
				var _this = this;
				this.$u.api.tm.getProcessflowBarCode({
					BarCode
				}).then(res => {
					if (res.statecode == '1') {
						this.list = res.subdata.map(item => {
							if (BarCode == item.BarCode) {
								item.flag = '1'
								this.cases++;
								this.pieces += item.BarQty;
							}
							return item
						})

						// if (this.cWhData.bWhPos == '1') {
						// 	this.list = res.subdata.map(item => {
						// 		if (BarCode == item.BarCode) {
						// 			item.flag = '1'
						// 			this.cases++;
						// 			this.pieces += item.BarQty;
						// 		}
						// 		return item
						// 	})
						// } else {
						// 	this.list = res.subdata.map(item => {
						// 		item.flag = '1'
						// 		this.cases++;
						// 		this.pieces += item.BarQty;
						// 		return item
						// 	})
						// }

					} else {
						this.list = []
						this.$u.toast(res.message);
					}
					_this.searchfocus()
				})

			},
			// 详情
			detailsTr(item) {

				this.form = item;
				this.show = true;
			},
			// 货位搜索
			cPoSearch(cPosCode) {
				this.$u.api.tm.getPosition({
					cWhCode: this.cWhData.cWhCode,
					cPosCode
				}).then(res => {
					if (res.statecode == '1') {
						let newArr = this.list.map(item => {
							if (item.flag == '1' && !item.cPosName) {
								item.cPosCode = res.subdata.cPosCode
								item.cPosName = res.subdata.cPosName
							}
							return item
						})
						this.list = newArr
						this.groundShow = false;
						this.cPosCode = ''
					} else {
						this.cPosCode = ''
						this.$u.toast(res.message);
					}

				})
			},
			// 箱码搜索
			search(value) {
				this.barCode = '';
				let _this = this;
				if (!this.list.length) {
					this.loadList(value);
				} else {
					let isTrue = true
					let batchFlag = true
					let newArr = this.list.map(item => {
						if (item.BarCode == value && item.flag == '1') {
							batchFlag = false
						}
						if (item.BarCode == value && item.flag != '1') {
							_this.cases++;
							_this.pieces += item.BarQty;
						}
						if (item.BarCode == value) {
							item.flag = '1';
							isTrue = false;
						}
						return item
					})
					if (isTrue) {
						uni.showModal({
							title: '提示',
							content: '该条码不是同一批任务，如需继续请先清空表格数据',
							showCancel: false,
							success: function() {
								_this.searchfocus()
							}
						});
					} else {
						if (!batchFlag) {
							this.$u.toast('已经扫描过了');
						}
						this.list = newArr
						setTimeout(() => {
							_this.searchfocus()
						}, 500);
					}

				}

			},
			// 入库
			warehouse() {
				if (!this.list.length) {
					this.$u.toast('请先扫描产品条码');
				} else {
					let rkFlag = true;
					this.list.forEach(item => {
						if (item.flag != '1' || !item.cPosCode || !item.cPosName) {
							rkFlag = false
						}
					})
					if (rkFlag) {
						let newArr = this.list.map(item => {
							let obj = {
								"BarCode": item.BarCode,
								"cWhCode": this.cWhData.cWhCode,
								"cPosCode": item.cPosCode,
								"cMaker": this.vuex_subdata.Code,
								// "cMaker": this.$store.state.vuex_subdata.Code,
							}
							return obj
						})
						
						this.$u.api.tm.setRdrecord10Add(newArr).then(res => {
							if (res.statecode == '1') {
								this.$u.toast(res.message);
								this.cases = 0;
								this.pieces = 0;
								this.list = []
								
							} else {
								this.$u.toast(res.message);
							}
						
						})
						
						console.log(newArr)
					} else {
						this.$u.toast('请先全部上架后在入库');
					}
				}
			},
			// 聚焦
			searchfocus() {
				document.querySelector('.search .u-input .uni-input-input').focus()
			},
			// 删除单个货位
			click(index) {

				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否清除本条货位',
					showCancel: true,
					success: function() {
						if (res.confirm) {
							let newArr = [..._this.list];
							newArr[index].cPosName = '';
							newArr[index].cPosCode = '';
							_this.list = newArr;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				});
			},
			/** 扫码 */
			toScan() {
				var _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.keywords = res.result;
						this.search();
					}.bind(this)
				});
			},

			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	@import '../tm.css';
</style>
